<!-- 库房管理-销售出货计划---查看详情操作 -->
<script lang="ts">
import {
  querySaleShippingPlanDetailById,
  addSaleShippingPlan
} from "/@/api/order/according";
import { reactive, watch, ref } from "vue";
import { errorMessage, alertMessage } from "/@/utils/message";
import { successMessage } from "/@/utils/message";
import { ElTable } from "element-plus";
import { ElForm } from "element-plus";
export default {
  name: "subItemData",
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    showAdd: {
      type: Boolean,
      default: false
    },
    formShow: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    subItemId: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    // 出库操作绑定数据
    const subItemData = reactive({
      showAdd: false,
      formShow: false, //表单显示隐藏
      readonly: false, //是否只读
      subItemId: 0, //操作ID
      dialogShow: false, //操作显示隐藏
      detailData: {} as any,
      formRules: {
        fcdDate: [
          { required: true, message: "请选择计划发货日期", trigger: "blur" }
        ]
      },
      disabledDate: function (time) {
        // 禁用不包含今天之前的日期
        return time.getTime() + 8.64e7 < Date.now();
      }
    });
    watch(props, n => {
      subItemData.dialogShow = n.dialogShow;
      subItemData.showAdd = n.showAdd;
      subItemData.formShow = n.formShow;
      subItemData.readonly = n.readonly;
      subItemData.subItemId = n.subItemId;
      if (subItemData.dialogShow) {
        queryList();
      }
    });

    const xTableData = ref<InstanceType<typeof ElTable>>();
    // 删除检查项目
    const deleteItem = item => {
      const index = subItemData.detailData.detail.indexOf(item);
      if (index !== -1) {
        subItemData.detailData.detail.splice(index, 1);
        console.log(subItemData.detailData.detail, "数量");
      }
    };
    // 查看详情
    const queryList = () => {
      querySaleShippingPlanDetailById(subItemData.subItemId).then(
        (res: any) => {
          if (res.code === 0) {
            subItemData.detailData = res.data;
          } else {
            errorMessage(res.message);
          }
        }
      );
    };
    // 保存
    const insertForm = ref<InstanceType<typeof ElForm>>();
    const submitEvent = (type: any) => {
      subItemData.detailData.status = type;
      insertForm.value.validate(valid => {
        if (valid) {
          if (subItemData.detailData.detail.length > 0) {
            var bool = false;
            for (var i = 0; i < subItemData.detailData.detail.length; i++) {
              let data = subItemData.detailData.detail[i];
              Object.keys(data).forEach(key => {
                if (key == "planNum") {
                  data[key] == 0 ? (bool = true) : null;
                }
              });
            }
            if (bool) {
              alertMessage("计划出货数量不能为0", "提示");
              return;
            }
          } else {
            alertMessage("请添加订单明细", "提示");
            return false;
          }
          addSaleShippingPlan(subItemData.detailData)
            .then((res: any) => {
              if (res.code === 0) {
                successMessage("操作成功");
                subItemClose();
              } else {
                errorMessage(res.message);
              }
            })
            .catch(() => {
              errorMessage("操作失败");
            });
        }
      });
    };
    const subItemClose = () => {
      insertForm.value.resetFields();
      ctx.emit("accordingItemClose", false);
      ctx.emit("searchEvent");
      subItemData.dialogShow = false;
      subItemData.formShow = false;
    };

    return {
      subItemData,
      queryList,
      insertForm,
      subItemClose,
      submitEvent,
      xTableData,
      deleteItem
    };
  }
};
</script>
<template>
  <div>
    <!-- 查看详情 -->
    <el-dialog
      v-if="subItemData.dialogShow"
      v-model="subItemData.dialogShow"
      title="查看详情"
      width="80%"
      top="7vh"
      :before-close="subItemClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        id="dialogForm"
        v-if="subItemData.formShow"
        :model="subItemData.detailData"
        :rules="subItemData.formRules"
        label-align="right"
        label-width="140px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="单号">
              {{ subItemData.detailData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="制单人" prop="userName">
              {{ subItemData.detailData.userAccount }}<span>&lt;</span
              >{{ subItemData.detailData.userName }}<span>&gt;</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="createDate" label="制单日期">
              {{
                subItemData.detailData.createDate
                  ? subItemData.detailData.createDate.split(" ")[0]
                  : ""
              }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="销售订单客户" prop="customerName">
              {{ subItemData.detailData.customerName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="地址" prop="address">
              {{ subItemData.detailData.address }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="计划发货日期" prop="fcdDate">
              <el-date-picker
                v-model="subItemData.detailData.fcdDate"
                value-format="YYYY-MM-DD"
                :disabled-date="subItemData.disabledDate"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
                size="small"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 回显表单 -->
      <el-table
        ref="xTable"
        border
        show-header-overflow
        show-overflow
        :row-config="{ isHover: true }"
        :print-config="{}"
        :export-config="{}"
        :data="subItemData.detailData.detail"
        :column-config="{ resizable: true }"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column
          label="销售单号"
          prop="saleOrderId"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="materialName"
          label="品名"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="materialCode"
          label="料号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="财务分类"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="qty"
          label="当前库存数量"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="occupied"
          label="已占用数量"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="cvpNum"
          label="计价数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="cvpUnit"
          label="成本单位"
          width="100"
        ></el-table-column>
        <el-table-column
          label="销售数量"
          prop="saleNum"
          width="140"
        ></el-table-column>
        <el-table-column
          label="销售单位"
          prop="saleUnit"
          width="100"
        ></el-table-column>
        <el-table-column
          label="已发数量"
          prop="rNum"
          width="140"
        ></el-table-column>
        <el-table-column
          label="交货日期"
          prop="deliveryDate"
          width="110"
        ></el-table-column>
        <el-table-column label="计划出货数量" width="140">
          <template #default="{ row }">
            <el-input-number
              v-model="row.planNum"
              size="small"
              style="width: 100%"
              placeholder="请输入"
              :max="row.saleNum"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="200">
          <template #default="{ row }">
            <el-input
              v-model="row.remark"
              size="small"
              style="width: 100%"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="90">
          <template #default="{ row }">
            <el-button type="danger" size="small" @click="deleteItem(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <vxe-button @click="subItemClose">取 消</vxe-button>
        <vxe-button
          v-if="subItemData.detailData.status < 3"
          status="primary"
          @click="submitEvent(1)"
          >暂存</vxe-button
        >
        <vxe-button
          v-if="subItemData.detailData.status < 3"
          status="primary"
          @click="submitEvent(2)"
          >下发</vxe-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
